<template>
  <!-- 为【新增讲师】页面，提供一个表单，用来给用户填写数据 -->
  <!-- 我们在后端中，提供了Teacher类，新增讲师，也是根据Teacher类的属性来新增讲师的 -->
  <div style="padding:20px">
    <el-form ref="form" label-width="80px">
      <el-form-item label="讲师姓名">
        <el-input v-model="teacher.name"/>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="teacher.intro"/>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career"/>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" placeholder="请选择头衔">
          <el-option :value="2" label="首席讲师"/>
          <el-option :value="1" label="高级讲师"/>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" :min="0" :max="100" controls-position="right"/>
      </el-form-item>
      <el-form-item label="入驻时间">
        <el-date-picker
          v-model="teacher.joinDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"/>
      </el-form-item>
      <!--
        讲师头像
        on-success：文件上传成功的回调
        before-upload：文件上传之前的预处理(对文件大小格式进行检查)
        action： 文件上传的地址【可以在Vue的data中写死】
       -->
      <el-form-item label="讲师头像">
        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="path"
          class="avatar-uploader">
          <!-- 回显上传头像的标签，判断的是teacher对象里面的avatar值 -->
          <img v-if="teacher.avatar" :src="teacher.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"/>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入api中的teacher.js，teacherApi是一个变量名，@表示src
import teacherApi from '@/api/teacher'
export default {
  data() {
    return {
      // 除了提交表单数据，还得携带一个参数，也就是目录\项目名，这个avatar是在阿里云OSS的目录名，不是Teacher类中的avatar属性
      path: 'http://localhost:8120/admin/oss/file/upload?module=avatar',
      // 定义一个参数，来接收浏览器填写后的表单数据，v-model进行双绑，当用户填写讲师信息后，会绑定到teacher这个Json对象中
      teacher: {
        // 给排序提供一个默认值
        sort: 1
      }
    }
  },
  created() {
    // this.$router 获取路由对象
    // this.$route  访问当前页面的单个路由
    // 获取【编辑】按钮跳转过来的id
    console.log(this.$route.params.id)
    // 对路由过来的编辑id，进行判断，当不等于空的时候，调用teacherById()函数，并将编辑id，传送过去
    if (this.$route.params.id) {
      this.teacherById(this.$route.params.id)
    }
  },
  methods: {
    // 上传图片之前执行
    beforeAvatarUpload(file) {
      /**
       * 将图片上传之前，通过参数file获取到图片
       * 然后对图片进行判断
       * JS中的===，表示全等，表示当且仅当两边的数据类型和值都相同的时候才返回true，否则是false
       */
      const isJPG = file.type === 'image/jpeg'// 检查是否是图片'image/jpeg'，是则返回true
      const isLt2M = file.size / 1024 / 1024 < 2// 检查图片的大小
      if (!isJPG) { // 不是图片时，执行里面
        this.$message.error('上传套餐图片只能是 JPG 格式!')
      }
      if (!isLt2M) { // 图片大小大于2M时，执行里面
        this.$message.error('上传套餐图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M// 当两个条件都满足的时候，返回true，才会执行文件上传
    },
    // 文件上传成功后的钩子
    handleAvatarSuccess(res, file) {
      // res代表响应对象
      console.log(res)
      // 前端接受上传成功的图片地址，用来做回显的
      this.teacher.avatar = res.data.path
      // 但是发的是异步请求，结果未回来之前，Vue已经渲染数据到div，也就是不会显示图片，此时需要强制刷新页面，再次渲染头像显示
      // $forceUpdate()是Vue提供好的强制刷新函数
      this.$forceUpdate()
    },

    // 在【提交】按钮的单击响应事件的方法中saveOrUpdate()，对填写的数据进行判断
    saveOrUpdate() {
      if (this.teacher.id) { // Vue语法中，this.teacher.id就表示teacher的id值存在，也就是ture
        // ture,表示id存在，进行更新
        this.update()
      } else {
        // false,表示id不存在，进行添加
        this.save()
      }
    },

    // 1、新增讲师
    save() {
      // （1）第一步：引入api中的teacher.js，调用api中的方法，向后端发送axios异步请求
      // 参数传的是封装了表单数据的teacher【它通过v-model绑定表单，已经将表单信息收集起来】，发给后端存到数据库中
      teacherApi.teacherSave(this.teacher)
        // （2）第二步：当请求成功，走then函数
        .then(response => {
          // response代表返回来的响应数据，此时增、删、改，不需要显示数据在页面，只需要给个提示信息即可
          this.$message.success('新增讲师成功')
          // （3）第三步：新增成功时，我们希望跳转到讲师列表的页面，显示所有讲师
          // 方式一：window.location = "/path" 通用的方式，只要指定路径，就可以跳转成功
          // 方式二：通过路由来跳转，在Vue官网API中，提供了一个方法：router.push('路由地址')，可以动态的导航到一个新 URL
          // this.$ 表示取的是Vue对象里面的router对象，router已经绑定给Vue对象，所以需要用this.$的方式来获取
          this.$router.push('/teacher/list')
        })
    },

    // 2、更新讲师
    update() {
      // （1）第一步：引入api中的teacher.js，调用api中的方法，向后端发送axios异步请求
      // 参数传的是封装了表单数据的teacher【它通过v-model绑定表单，已经将表单信息收集起来】，发给后端存到数据库中
      teacherApi.updateTeacher(this.teacher)
        // （2）第二步：当请求成功，走then函数
        .then(response => {
          // response代表返回来的响应数据，此时增、删、改，不需要显示数据在页面，只需要给个提示信息即可
          this.$message.success('更新讲师成功')
          // （3）第三步：新增成功时，我们希望跳转到讲师列表的页面，显示所有讲师
          // 方式一：window.location = "/path" 通用的方式，只要指定路径，就可以跳转成功
          // 方式二：通过路由来跳转，在Vue官网API中，提供了一个方法：router.push('路由地址')，可以动态的导航到一个新 URL
          // this.$ 表示取的是Vue对象里面的router对象，router已经绑定给Vue对象，所以需要用this.$的方式来获取
          this.$router.push('/teacher/list')
        })
    },

    // 3、根据id查询讲师，提供一个形参id，用来接收钩子函数传过来的编辑路由所携带的id，然后传给getTeacherById()函数，往后端发送
    teacherById(id) {
      // 调用api，像后端发送请求
      teacherApi.getTeacherById(id).then(response => {
        console.log(response)
        // 将根据id查到的讲师信息，赋值给Vue对象中的teacher
        this.teacher = response.data.item
      })
    }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
